<template>
	<view class="content">
		<u-top-tips ref="submitTips"></u-top-tips>
		<view class="banner">
			<u-swiper :list="banner" name="pic" height="400"></u-swiper>
		</view>
		<view class="index-type">
			<u-grid :col="4">
					<u-grid-item @click="listabout">
						<u-icon name="account-fill" :size="46"></u-icon>
						<view class="grid-text">关于</view>
					</u-grid-item>
					<u-grid-item @click="listpros">
						<u-icon name="grid-fill" :size="46"></u-icon>
						<view class="grid-text">产品</view>
					</u-grid-item>
					<u-grid-item @click="listcases">
						<u-icon name="photo-fill" :size="46"></u-icon>
						<view class="grid-text">案例</view>
					</u-grid-item>
					<u-grid-item @click="listnews">
						<u-icon name="file-text-fill" :size="46"></u-icon>
						<view class="grid-text">动态</view>
					</u-grid-item>
				</u-grid>
		</view>
		<view class="index-pro">
			<view class="big-title">
				<u-section title="产品设备" sub-title="查看更多" @click="listpros"></u-section>
			</view>
			<view class="prolist">
				<view class="list" hover-class="uni-list-cell-hover" v-for="(item,index) in prolist" :key="index"
					@tap="showpros" :data-id="item.id">
					<u-image width="100%" mode="widthFix" :src="item.pic" :lazy-load="true" class="img"></u-image>
					<view class="title">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="index-pro">
			<view class="big-title">
				<u-section title="项目案例" sub-title="查看更多" @click="listcases"></u-section>
			</view>
			<view class="prolist w100">
				<view class="list" hover-class="uni-list-cell-hover" v-for="(item,index) in caselist" :key="index"
					@tap="showcase" :data-id="item.id">
					<u-image width="100%" mode="widthFix" :src="item.pic" :lazy-load="true" class="img"></u-image>
					<view class="title">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="index-pro">
			<view class="big-title">
				<u-section title="公司简介" sub-title="查看更多" @click="listabout"></u-section>
			</view>
			<view class="about-content">
				<u-parse :html="about"></u-parse>
			</view>
		</view>
		<view class="index-pro">
			<view class="big-title">
				<u-section title="新闻资讯" sub-title="查看更多" @click="listnews"></u-section>
			</view>
			<view class="newslist">
				<view class="list" hover-class="uni-list-cell-hover" v-for="(item,index) in newslist" :key="index"
					@tap="shownews" :data-id="item.id">
					<view class="title">{{item.title}}</view>
					<view class="desc">
						<text>发布时间：{{item.create_time | date('yyyy-mm-dd')}}</text>
						<text>浏览人数：{{item.click}}次</text>
					</view>
					<u-line color="#f3f4f6" :hair-line="false"></u-line>
				</view>

			</view>
		</view>
		
		<home-message></home-message>
		<home-footer></home-footer>
	</view>

</template>

<script>
	import homeFooter from '@/pages/tabbar/tabbar.vue';
	import homeMessage from '@/pages/tabbar/message.vue';
	export default {
		components: {
			homeFooter,
			homeMessage
		},
		data() {
			return {
				prolist: '',
				banner: [],
				caselist: [],
				about: "",
				newslist: [],
				form: {
					name: '',
					phone: '',
					desc: ''
				},
			};
		},
		onLoad: function() {
			// 产品
			this.$u.api.getList({
				cid: this.$globals.product_id,
				limit: '4',
			}).then(res => {
				// console.log(res.data);
				this.prolist = res.data;
			});
			// banner
			this.$u.api.getBanner({
				type: this.$globals.banner_id,
			}).then(res => {
				this.banner = res.data;
			});
			// 案例
			this.$u.api.getList({
				cid: this.$globals.case_id,
				limit: 4
			}).then(res => {
				this.caselist = res.data;
			});
			// 公司介绍
			this.$u.api.getType({
				typeid: this.$globals.about_id,
			}).then(res => {
				this.about = res.data.content;
			});
			// 新闻
			this.$u.api.getList({
				cid: this.$globals.news_id,
				limit: 6,
				orderby: 'id asc'
			}).then(res => {
				this.newslist = res.data;
			});
			// 网站信息
			this.$u.api.getConfig({
				name: 'site_title*seo_title*seo_keywords*seo_description',
			}).then(res => {
				let seoinfo = res.data;
				uni.setNavigationBarTitle({
					title: res.data.site_title,
				})
				// #ifdef  MP-BAIDU
				// 百度小程序TDK配置
				swan.setPageInfo({
					title: seoinfo.seo_title,
					keywords: seoinfo.seo_keywords,
					description: seoinfo.seo_description,
				})
				// #endif
			});
		},
		methods: {
			showpros(e) {
				var prosid = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '../info/pro_show?show=' + prosid
				});
			},
			shownews(e) {
				var id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '../info/news_show?show=' + id
				});
			},
			showcase(e) {
				var id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '../info/case_show?show=' + id
				});
			},

			listpros(e) {
				uni.navigateTo({
					url: '../list/pro_list?show=' + this.$globals.product_id
				});
			},
			listcases(e) {
				uni.navigateTo({
					url: '../list/case_list?show=' + this.$globals.case_id
				});
			},
			listabout(e) {
				uni.navigateTo({
					url: '../list/about_list?show=' + this.$globals.about_id
				});
			},
			listnews(e) {
				uni.navigateTo({
					url: '../list/news_list?show=' + this.$globals.news_id
				});
			},
			
		},
	}
</script>
<style>
	.big-title {
		margin-bottom: 15upx;
	}
	.index-type{
		margin-bottom: 35upx;
	}

	.banner {
		padding: 20upx 0;
		margin-bottom: 15upx;
	}

	.index-pro {
		margin-bottom: 45upx;
	}

	.about-content {
		line-height: 1.8em;
		background-color: #FFFFFF;
		padding: 20upx 20upx;
		border-radius: 3px;
		margin-top: 25upx;
		font-size: 26upx;
		color: #909399;

	}

	.about-content img {
		width: 100%;
	}
</style>
